<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,body {
				background-color: #efeff4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
		</style>
	</head>
	<body>
		<div class="mui-content">
			<ul class="mui-table-view mui-table-view-chevron">
				<!--<li id="switch" class="mui-table-view-cell">
					定时轮播
					<div class="mui-switch">
						<div class="mui-switch-handle"></div>
					</div>
				</li>-->
			</ul>
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/meishi1.jpg">
							<p class="mui-slider-title">静静的的享受这美食</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/meishi2.jpg">
							<p class="mui-slider-title">静静的的享受这美食</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/meishi3.jpg">
							<p class="mui-slider-title">静静的的享受这美食，静静的喝咖啡</p>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator mui-text-right">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			
			
			
			<div class="title">
			</div>
			
		    <div class="mui-card">
				<div class="mui-card-header">今日为您推荐</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						1、豆子茄子<br>
						2、西红柿炒鸡蛋
					</div>
				</div>
				<div class="mui-card-footer">2016-09-20  星期四  天气晴</div>
			</div>
			
			<div class="mui-card">
				<div class="mui-card-header mui-card-media">
					<img src="../images/meishi4.jpg" />
					<div class="mui-media-body">
						嘟嘟嘟
						<p>发表于 2016-06-30 15:30</p>
					</div>
					<!--<img class="mui-pull-left" src="../images/logo.png" width="34px" height="34px" />
					<h2>小M</h2>
					<p>发表于 2016-06-30 15:30</p>-->
				</div>
				<div class="mui-card-content" >
					<img src="../images/meishi1.jpg" alt="" width="100%"/>

					<div class="mui-card-content-inner">
						<p style="color: #333;">今日天气正好，闲来无事大显身手一把</p>
					</div>

				</div>
				
			</div>
			
			<div class="mui-card">
				<div class="mui-card-header mui-card-media">
					<img src="../images/meishi2.jpg" />
					<div class="mui-media-body">
						嘟嘟嘟
						<p>发表于 2016-06-30 15:30</p>
					</div>
					<!--<img class="mui-pull-left" src="../images/logo.png" width="34px" height="34px" />
					<h2>小M</h2>
					<p>发表于 2016-06-30 15:30</p>-->
				</div>
				<div class="mui-card-content" >
					<img src="../images/meishi2.jpg" alt="" width="100%"/>

					<div class="mui-card-content-inner">
						<p style="color: #333;">今日天气正好，闲来无事大显身手一把</p>
					</div>

				</div>
				
			</div>
			
			
				<div class="title">
				<span style="">今日top菜单</span>
			   </div>
			   
			   
			<div class="mui-card" style="margin-bottom: 35px;">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-right" src="../images/meishi5.jpg">
							<div class="mui-media-body">
								西湖的鱼
								<p class='mui-ellipsis'>准备上好的黑鱼1斤.</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-right" src="../images/meishi4.jpg">
							<div class="mui-media-body">
								西施的眼泪
								<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-right" src="../images/meishi3.jpg">
							<div class="mui-media-body">
								仙人指路
								<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
			
			
			
			
			
			
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		
		var slider = mui("#slider");
		
		slider.slider({
					interval: 5000
				});
		
	</script>
</html>